<template>
  <div class="cont-main">
    <div class="menu-body common-content">
      <div class="top-search-bar">
        <el-form size="small" ref="queryForm" inline>
          <el-form-item v-if="auth&&auth.add">
            <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                @click="addRole()">新增
            </el-button>
          </el-form-item>
        </el-form>

      </div>

      <div class="main-table-group">
        <el-table
            ref="dataTreeList"
            class="yt-table"
            :data="tableData"
            :max-height="tableMaxHeight"
            style="width: 100%;"
            row-key="id"
            lazy
            :load="load"
            @expand-change="expandChange"
            border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column prop="menuName" label="菜单名称" width="200" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="menuComponet" label="组件路径" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column prop="menuStatus" label="菜单状态" width="80" align="center">
            <template slot-scope="{row}">
              <el-tag v-if="parseInt(row.menuStatus)===1" type="success" size="mini" effect="dark">显示</el-tag>
              <el-tag v-else type="warning" size="mini" effect="dark">隐藏</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="menuUrl" label="菜单地址" width="130" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="routerName" label="路由名称" width="130" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="addTime" label="新增时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="editTime" label="修改时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="menuAuthority" label="权限标识" width="100" align="center">
          </el-table-column>
          <el-table-column prop="menuIcon" label="菜单图标" width="150" align="center" show-overflow-tooltip >
          </el-table-column>
          <el-table-column prop="typeName" label="类型名称" width="80" align="center">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <i class="el-icon-edit table-btn" @click="edit(scope.row)" title="编辑" v-if="auth&&auth.edit"></i>
              <i class="el-icon-delete table-btn del" @click="del(scope.row)" title="删除" v-if="auth&&auth.del"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--新增-->
    <AddMenuDailog ref="addMenuDailog" @success="success"></AddMenuDailog>
    <!--修改-->
    <EditMenuDailog ref="editMenuDailog" @success="success"></EditMenuDailog>
  </div>
</template>

<script>
import {
  get_getmenuList,
  put_menuAdd,
  get_getMenuListByParentId,
  put_menuDel,
  put_menuEdit,
  get_getRoleTree,
} from "@/apis/user/userApi";
import {getCookie} from '@/utils/auth'
import {menuFilter} from '@/utils'
import AddMenuDailog from './comp/AddMenuDailog'
import EditMenuDailog from './comp/EditMenuDailog'

export default {
  aside: 'comp/CompAside',
  components: {AddMenuDailog, EditMenuDailog},
  data() {
    return {
      auth: null,
      tableMaxHeight: '50px',
      tableData: [],
      allDatas: []
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.dataTreeList.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
  },
  methods: {
    // 获取一级菜单列表
    getList() {
      this.tableData = []
      this.allDatas = []
      get_getmenuList({
        menuId: this.$route.meta.id
      }).then((res) => {
        let {data} = res.data;
        this.auth = res.data.auth
        data.forEach((item, index) => {
          item.hasChildren = true
          item.expandeds = [item.id]
          if (item.addTime) {
            item.addTime = this.$moment(item.addTime).format("YYYY-MM-DD HH:mm:ss");
          }
          if (item.editTime) {
            item.editTime = this.$moment(item.editTime).format("YYYY-MM-DD HH:mm:ss");
          }
        });
        this.tableData = data;
        this.allDatas = data
      });
    },
    success() {
      this.getList();
    },
    // 懒加载
    load(tree, treeNode, resolve) {
      get_getMenuListByParentId({id: tree.id}).then((res) => {
        let {data, code} = res.data;
        let datas = data.filter((item) => {
          return item.menuType !== '0'
        })
        datas.forEach((item, index) => {
          item.hasChildren = item.menuType !== 'O'
          item.expandeds = [...tree.expandeds, item.id]
          if (item.addTime) {
            item.addTime = this.$moment(item.addTime).format("YYYY-MM-DD HH:mm:ss");
          }
          if (item.editTime) {
            item.editTime = this.$moment(item.editTime).format("YYYY-MM-DD HH:mm:ss");
          }
        });
        this.allDatas = [...this.allDatas, ...datas]
        resolve(datas)
      });
    },
    expandChange(row, expanded) {
      if (expanded) {
        this.toggleRow(this.allDatas, row.expandeds)
      }
    },

    toggleRow(datas, opens) {
      datas.forEach(item => {
        if (item.children && item.children.length) {
          this.toggleRow(item.children, opens)
        }
        if (opens.some(id => id === item.id)) {
          this.$refs.dataTreeList.toggleRowExpansion(item, true)
        } else {
          this.$refs.dataTreeList.toggleRowExpansion(item, false)
        }
      })
    },
    // 添加
    addRole() {
      this.$refs.addMenuDailog.show()
    },
    // 编辑
    edit(row) {
      console.log(row)
      this.$refs.editMenuDailog.show({
        menuComponet: row.menuComponet,
        menuName: row.menuName,
        menuStatus: row.menuStatus,
        menuUrl: row.menuUrl,
        menuIcon: row.menuIcon,
        menuType: row.menuType,
        remarks: row.remarks,
        parentId: row.parentId,
        parentName: row.parentId == '0' ? '无' : row.parentId,
        isAuthority: row.isAuthority + "",
        id: row.id,
        routerName: row.routerName,
        sort: row.sort
      })
    },
    //删除
    del(row) {
      let title = "";
      if (row.parentId == 0) {
        title = "此操作将删除该菜单下的所有子菜单, 是否继续?";
      } else {
        title = "此操作将删除所选菜单, 是否继续?";
      }
      let that = this;
      that.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        put_menuDel({id: row.id}).then((res) => {
          let {code, msg} = res.data;
          this.getList();
          this.getTree();
          this.$message.success(msg);
        });
      }).catch(() => {
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .cont-main {
    height: 100%;
    padding: 15px;

    .menu-body {
      height: 100%;
      padding: 15px;
    }
  }

  .main-table-group {
    height: calc(100% - 100px);

    /deep/ .el-table__expand-icon {
      color: #ffffff;
    }
  }

  /deep/ .el-scrollbar .el-scrollbar__wrap {
    max-height: 300px;
  }

  /deep/ .el-radio {
    color: #fff;
  }
</style>
